<template>
  <div class="container">
    <el-form
      :model="ruleForm"
      :rules="rules"
      status-icon
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="学科名称" prop="subjectName">
        <el-input
          style="width: 100%"
          v-model="ruleForm.subjectName"
          placeholder="请输入学科名称"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="是否显示" prop="isFrontDisplay">
        <el-switch
          active-color="#13ce66"
          inactive-color="#ff4949"
          v-model="ruleForm.isFrontDisplay"
          @change="changeFn"
        ></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button @click="cancelFn">取消</el-button>
        <el-button type="primary" @click="determine">确认</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { add as addSubjectsAPI, detail as detailAPI, update as updateAPI, simple as simpleAPI } from '@/api/hmmm/subjects.js'
export default {
  name: 'subjectsAdd',
  props: {
    currentData: { // 父组件传来的当前点击学科数据
      type: Object,
      required: true
    },
    isEdit: { // 编辑状态
      type: Boolean,
      required: true
    }
  },
  data () {
    // 自定义验证函数
    const discipline = (rule, value, callback) => {
      // 添加学科时,检查学科名称是否有相同的
      let arr = this.simpleSubject
      //   如果是修改状态
      if (this.isEdit) {
        //   修改学科时,检查学科名称是否有相同的名称,并且排除自己
        arr = this.simpleSubject.filter(item => item !== value)
      }
      arr.includes(value) ? callback(new Error('已经有重复的学科名称')) : callback()
    }
    return {
      // 表单数据
      ruleForm: {
        isFrontDisplay: true,
        subjectName: ''
      },

      // 校验规则
      rules: {
        subjectName: [{ required: true, message: '请输学科名称', trigger: 'blur' },
          { validator: discipline, trigger: 'blur' }]
      },

      //   学科简单列表
      simpleSubject: []
    }
  },
  created () {
    //   获取学科详情
    this.getDetail()

    // 获取学科简单列表
    this.simple()
  },
  methods: {
    // 获取学科简单列表
    async simple () {
      const res = await simpleAPI()
      this.simpleSubject = res.data.map(item => item.label)
    },

    // 获取学科详情 修改学科时候数据回填
    async getDetail () {
      const res = await detailAPI(this.currentData)
      //   console.log(res)

      // 如果是修改状态
      if (this.isEdit) {
        // 获取到是否显示
        if (res.data.isFrontDisplay === 1) {
          res.data.isFrontDisplay = true
        } else {
          res.data.isFrontDisplay = false
        }
        this.ruleForm = res.data
      }
    },

    //   点击确定按钮
    determine () {
      this.$refs.ruleForm.validate(valid => {
        //   兜底
        if (!valid) return false
        else {
          this.isEdit ? this.editSubjectFn() : this.addSubjectFn()
          // 通知父组件关闭弹框并且重新渲染列表
          this.$emit('close')
        }
      })
    },

    // 点击取消按钮
    cancelFn () {
      // 通知父组件关闭弹框
      this.$emit('close')
    },

    // 添加学科
    async addSubjectFn () {
      // 调用添加学科的接口
      const res = await addSubjectsAPI(this.ruleForm)
      // console.log(res)

      // 判断是否添加成功弹框
      if (res.status === 200 && res.statusText === 'OK') {
        this.$message.success('新增学科成功')
      } else {
        this.$message.success('添加学科失败')
      }
    },

    // 修改学科
    async editSubjectFn () {
      //   调用修改学科接口
      const res = await updateAPI(this.ruleForm)
      if (res.data.success) return this.$message.success('修改学科成功')
      this.$message.success('修改学科失败')
    },

    // 开关触发的回调函数
    changeFn (val) {
      if (val === true) {
        val = 1
      } else if (val === false) {
        val = 0
      }
    }
  }
}
</script>

<style scoped >
</style>
